<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane
        v-if="roleCheck(paySetType.rechargeTab)"
        :name="tabType.one"
      >
        <span slot="label"><i class="el-icon-date"></i> 三方入款配置</span>
        <Receipt v-show="activeTab === tabType.one"/>
      </el-tab-pane>
      <el-tab-pane
        v-if="roleCheck(paySetType.thirdRechargeTab)"
        :name="tabType.two"
      >
        <span slot="label"><i class="el-icon-date"></i> 三方入款应用</span>
        <EscrowSetting v-show="activeTab === tabType.two"/>
      </el-tab-pane>
      <el-tab-pane
        v-if="roleCheck(paySetType.withdrawTab)"
        :name="tabType.three"
      >
        <span slot="label"><i class="el-icon-date"></i> 出款配置及应用</span>
        <Pay v-show="activeTab === tabType.three"/>
      </el-tab-pane>
      <el-tab-pane
        v-if="roleCheck(paySetType.merchantRankTab)"
        :name="tabType.four"
      >
        <span slot="label"><i class="el-icon-date"></i> 商户成功排行</span>
        <MerchantRank v-show="activeTab === tabType.four"/>
      </el-tab-pane>
    </el-tabs>
    <BackToTop />
  </div>
</template>

<script>

// constants
import { paySetType } from '@/router/payRoutes';

// components
import BackToTop from '@/components/BackToTop';
import Receipt from './receipt';
import Pay from './pay';
import EscrowSetting from './depositApplication';
import MerchantRank from './merchantRank';

// mixins
import { tabs } from '@/build';

const tabType = {
  one: 'one',
  two: 'two',
  three: 'three',
  four: 'four',
};

export default {
  name: 'finance-setting',
  components: {
    BackToTop,
    Pay,
    Receipt,
    EscrowSetting,
    MerchantRank,
  },
  mixins: [tabs],
  data() {
    return {
      tabType,
      paySetType,
      activeTab: tabType.one,
    };
  },
  mounted() {
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '三方入款设置', true) });
  },
  methods: {
    changeTab(data) {
      this.activeTab = data.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, data.label, true) });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
